<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never" style="border:0px;">
      <div slot="header" style="color:#303133;font-size:14px;font-weight:bold;">
        <span>App版本管理</span>
      </div>
        <!-- 查询和其他操作 -->
      <div class="filter-container" id="searchBox">
        <div class="left">
          <vxe-toolbar ref="xToolbar">
        <template #buttons>
          <el-button type="text" icon="el-icon-plus" @click="addEvent()">上传APP版本</el-button>
        </template>
      </vxe-toolbar>
        </div>
        <div class="right">
             <el-button  type="primary" @click="listProjectLog">查询</el-button>
        </div>
      </div>
      
      <vxe-table
        v-loading="loading"
        :data="taskData"
        border="none"
        highlight-hover-row
        show-header-overflow
        show-overflow
        align="center"
        :header-cell-style="{ background: '#F7F7F8', color: '#606266' }"
        @cell-dblclick="cellDblclick"
      >
        <vxe-table-column type="seq" title="序号" width="70" />
        <vxe-table-column title="数据id" field="id" />
        <vxe-table-column title="主版本" field="mainVersion" />
        <vxe-table-column title="构建编号" field="buildNo" />
        <vxe-table-column title="下载地址" field="bundleUrl" />
        <vxe-table-column title="更新内容" field="updateContent" />
        <vxe-table-column title="类型" field="platform" />
        <vxe-table-column
          title="是否过期"
          field="isExpired"
          :formatter="formDataValue"
        />
        <vxe-table-column
          title="是否强制更新"
          field="isMandatory"
          :formatter="formDataValue"
        />
        <vxe-table-column title="操作时间" field="createTime" />
      </vxe-table>
      <!--  新增版本 -->
      <vxe-modal
        @close="closeModal"
        v-model="modalUpdate.show"
        width="700px"
        height="690px"
        :title="modalUpdate.edit ? '修改&保存' : '新增&保存'"
        class="addModal"
      >
        <!-- <template v-slot> -->
        <el-form
          :model="modalUpdateForm"
          title-align="right"
          title-width="100"
          ref="modalUpdateForm"
        >
          <el-form-item
            label="主版本"
            prop="mainVersion"
            label-width="200px"
            :rules="{ required: true, message: '主版本不能为空', trigger: 'blur' }"
          >
            <el-input
              v-model="modalUpdateForm.mainVersion"
              placeholder="主版本"
              clearable
              style="width: 400px"
            />
          </el-form-item>

          <el-form-item
            label="构建编号"
            prop="buildNo"
            :rules="{ required: true, message: '构建编号不能为空', trigger: 'blur' }"
            label-width="200px"
          >
            <el-input
              v-model="modalUpdateForm.buildNo"
              placeholder="构建编号"
              clearable
              style="width: 400px"
              v-if="modalUpdateForm.id === undefined"
            />
            <el-input
              v-model="modalUpdateForm.buildNo"
              placeholder="构建编号"
              clearable
              style="width: 400px"
              v-if="modalUpdateForm.id != undefined"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="更新内容"
            prop="updateContent"
            label-width="200px"
            :rules="[{ required: true, message: '更新内容不能为空', trigger: 'blur' }]"
          >
            <el-input
              v-model="modalUpdateForm.updateContent"
              placeholder="更新内容"
              clearable
              style="width: 400px"
              type="textarea"
              :row="3"
              resize="none"
            />
          </el-form-item>
          <el-form-item
            label="平台类型"
            field="platform"
            prop="platform"
            label-width="200px"
            :rules="[{ required: true, message: '平台类型不能为空' }]"
            required
            v-if="modalUpdateForm.id === undefined"
          >
            <el-select v-model="modalUpdateForm.platform" placeholder="请选择平台类型" clearable>
              <el-option value="android" label="android"></el-option>
              <el-option value="ios" label="ios"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="是否强制更新"
            field="isMandatory"
            prop="isMandatory"
            label-width="200px"
            :rules="[{ required: true, message: '请选择是否强制更新' }]"
            required
            v-if="modalUpdateForm.id === undefined"
          >
            <el-select v-model="modalUpdateForm.isMandatory" placeholder="是否强制更新" clearable>
              <el-option value="0" label="否"></el-option>
              <el-option value="1" label="是"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="选择上传app文件"
            prop="file"
            label-width="200px"
            
          >
            <el-upload
              class="upload-demo"
              drag
              action="#"
              :http-request="handleUpload"
              :limit="1"
              :on-exceed="handleUploadLimit"
              accept=".apk, .ipa"
              :file-list="item"
              :on-remove="handleRemovelist"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label-width="200px">
            <el-button type="primary" @click="addOrUpdate('modalUpdateForm')" status="primary">提交</el-button>
            <el-button @click="closeModal" status="danger">关闭</el-button>
          </el-form-item>
        </el-form>
        <!-- </template> -->
      </vxe-modal>
      <el-dialog
        title="上传进度"
        :visible.sync="visible"
        width="30%"
        :closeOnClickModal="false"
        :closeOnPressEscape="false"
        :showClose="false"
        center
        top="40vh"
      >
        <el-progress :percentage="percentage"></el-progress>
      </el-dialog>
    </el-card>
    <vxe-pager
      class="pager"
      @page-change="changePage"
      :current-page.sync="listQuery.pageNo"
      :page-size.sync="listQuery.pageSize"
      :total="total"
      :page-sizes="[10, 30, 50, 100]"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
    ></vxe-pager>
  </div>
</template>

<script>
import { queryAppVersionList, saveOrUpdateAppVersion } from '@/api/appVersion';
export default {
  name: 'Version',
  data() {
    return {
      loading: true,
      taskData: [],
      modalUpdate: {
        show: false,
        edit: false,
        originRow: {},
      },
      modalUpdateForm: {
        mainVersion: undefined,
        buildNo: undefined,
        file: undefined,
        updateContent: undefined,
        platform: undefined,
        isMandatory:undefined
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      item: undefined,
      percentage: undefined,
      visible: false,
    };
  },
  mounted() {
    this.listProjectLog();
  },
  methods: {
    listProjectLog() {
      this.loading = true;
      queryAppVersionList(this.listQuery.pageNo, this.listQuery.pageSize).then(data => {
        this.taskData = data.data;
        this.total = data.total;
        this.loading = false;
      });
    },
    addOrUpdate() {
      const _this = this;

      this.$refs['modalUpdateForm'].validate(valid => {
        if (valid) {
          if (this.modalUpdateForm.file === undefined) {
            this.$message.error('请选择app文件');
            return false;
          }
          let timer = null;
          this.visible = true;
          var formData = new FormData();
          formData.append('file', this.modalUpdateForm.file);
          formData.append('mainVersion', this.modalUpdateForm.mainVersion);
          formData.append('buildNo', this.modalUpdateForm.buildNo);
          formData.append('updateContent', this.modalUpdateForm.updateContent);
          formData.append('platform', this.modalUpdateForm.platform);
          formData.append('isMandatory', this.modalUpdateForm.isMandatory);
          saveOrUpdateAppVersion(formData, res => {
            window.clearTimeout(timer);
            let loaded = res.loaded,
              total = res.total;
            _this.$nextTick(() => {
              _this.percentage = parseInt((loaded / total) * 100);
            });
            if ((loaded / total) * 100 == 100) {
                _this.visible = false;
              setTimeout(() => {
                _this.percentage = undefined
                _this.$notify.success({
                  title: '成功',
                  message: '提交成功',
                });
                _this.$refs['modalUpdateForm'].resetFields()
                _this.closeModal();
              },500)
            } else {
              timer = setTimeout(() => {
                this.visible = false;
                _this.$notify.error({
                  title: '失败',
                  message: '上传失败',
                });
                _this.$refs['modalUpdateForm'].resetFields()
                _this.closeModal();
              }, 3000 * 2);
            }
          })
            .then(response => {
              //  this.$notify.success({
              //   title: '成功',
              //   message: '提交成功',
              // });
              // this.$refs['modalUpdateForm'].resetFields()
              this.listProjectLog();
            })
            .catch(response => {});
        }
      });
    },
    addEvent(row) {
      this.modalUpdate.show = true;
      this.modalUpdate.edit = false;
    },
    closeModal(row) {
      this.modalUpdate.show = false;
      this.modalUpdate.edit = true;
      this.percentage=undefined;
      this.listProjectLog();
      this.restAddForm(row);
    },
    //  重置新增表单
    restAddForm(row) {
      this.modalUpdateForm = {
        mainVersion: undefined,
        buildNo: undefined,
        file: undefined,
        updateContent: undefined,
        platform: undefined,
        isMandatory:undefined
      };
      this.item = undefined;
      this.$refs['modalUpdateForm'].resetFields();
    },

    changePage() {
      this.listProjectLog();
    },
    handleUpload(item) {
      this.item = [item.file];
      this.modalUpdateForm.file = item.file;
    },
    handleRemovelist(file,fileList) {
      this.item = [];
      this.modalUpdateForm.file = undefined;
    },
    handleUploadLimit() {
      this.$message.error('仅可以上传一个文件');
    },
    cellDblclick({ row, rowIndex, column, columnIndex, cell }, event) {
      let _this = this;
      this.$copyText(event.target.innerText).then(function() {
        _this.$message.info('复制成功');
      });
    },
    formDataValue(row, column, cellValue, index) {
      return row.cellValue ? '是' : '否'
    }
  },
};
</script>
<style lang="scss">
.addModal {
  .el-form-item__error {
    padding-top: 0;
    line-height: 0.7;
  }
  .upload-demo {
    li {
      margin-top: -10px;
    }
  }
}
</style>
<style lang="scss" scoped>
.filter-container{
  display: flex;
  justify-content: space-between;

}
#searchBox {
 overflow: hidden;
}
.toolbar-form {
  padding-top: 10px;
  padding-left: 10px;
}

.vxe-table {
  margin-left: 10px;
}
//修改toolbar的高度固定的问题
.vxe-toolbar {
  height: auto;
}
.pager {
  position: fixed;
  bottom: 0;
  right: 28px;
  background-color: #fafafb;
  z-index: 2;
  height: 40px;
  width: calc(100% - 260px);
}
.left {
    flex: 14;
    display: flex;
    flex-flow: row wrap;
    margin-right: 20px;
    

}
 .right {
    flex: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    margin-bottom: 10px;
    /* margin-bottom: 30px; */
 }
</style>
